<template>
  <ComWrapper>
    <el-row :gutter="15">
			<el-col :lg="8">
				<el-card shadow="never">
					<Basebar />
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<Bidirectional />
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<Formatter />
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<stackedGrouped />
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<Range />
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<StackedColumn />
				</el-card>
			</el-col>
		</el-row>
  </ComWrapper>
</template>

<script setup>
import {defineAsyncComponent} from 'vue'

const Basebar = defineAsyncComponent(() => import('./components/basebar'))
const Bidirectional = defineAsyncComponent(() => import('./components/bidirectional'))
const Formatter = defineAsyncComponent(() => import('./components/formatter'))
const stackedGrouped = defineAsyncComponent(() => import('./components/stacked-grouped'))
const Range = defineAsyncComponent(() => import('./components/range'))
const StackedColumn = defineAsyncComponent(() => import('./components/stacked-column'))
</script>
